<template>
  <div class="latest">
    <div class="latest__title">最近在玩</div>
    <div class="latest__body">
      <GameList :content="playedList.list" direction="row" item="gray" v-if="playedList.count"/>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import GameList from '@/components/game/List'

export default {
  name: 'latestPlayed',
  components: {
    GameList
  },
  computed: {
    ...mapGetters([
      'playedList'
    ])
  },
  created () {
    this.$store.dispatch('getPlayedList')
  }
}
</script>

<style scoped lang="scss">
.latest {
  display: flex;
  padding: 0.3rem 0.15rem 0.1rem;

  &__title {
    background-image: linear-gradient(180deg, rgba(255, 116, 40, 1) 0%,rgba(255, 151, 40, 1) 100%);
    border-radius: 0.04rem;
    color: #fff;
    font-size: 0.16rem;
    height: 1.17rem;
    padding: 0.1rem 0;
    position: relative;
    text-align: center;
    width: 0.27rem;
  }

  &__body {
    flex: 1;
    margin: 0 -0.15rem 0 -0.05rem;
    overflow-x: auto;
  }
}
</style>
